<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕文字冒泡效果</title>
</head>

<body>

</body>
<script>
    function bubblingTextInScreen(textList = [
        "富强",
        "民主",
        "文明",
        "和谐",
        "自由",
        "平等",
        "公正",
        "法治",
        "爱国",
        "敬业",
        "诚信",
        "友善"
    ]) {

        this.textList = textList || [];
        this.start();
    }

    bubblingTextInScreen.prototype.start = function(){
        const {textList}=this;
        // 当前文字索引
        let i = 0;

        // 向上飘的速度 单位毫秒
        const speed = 1000;

        // 向上飘的距离 单位像素
        const offsetY = 150;

        // 节流  间隔最小时间  单位毫秒
        let throttleTime = 100;

        // 上次生成元素的时间
        let lastTime = 0;

        // 元素层级
        const zIndex = 999;

        // 字体颜色
        const fontColor = 'red';
        this.fn=(e)=>{
            const nowTime = new Date().getTime();
            if (nowTime - lastTime < throttleTime) return;
            lastTime = nowTime;
            const { x, y } = e;
            const span = document.createElement('span');
            span.className = 'bubbling-text';
            span.innerText = textList[i];
            i++;
            i = textList.length == i ? 0 : i;
            const fixedStyle = `user-select: none;z-index:${zIndex};color: red;position: fixed;left: ${x}px;transition: all ${speed / 1000}s`;
            span.style = fixedStyle + `;top: ${y}px`;
            document.querySelector('body').appendChild(span);
            span.getBoundingClientRect();
            span.style = fixedStyle + `;top: ${y - offsetY}px;opacity:0;`;
            setTimeout(() => span.remove(), speed);
        }
        window.addEventListener('click',this.fn);
    }

    bubblingTextInScreen.prototype.remove =function () {
            window.removeEventListener('click',this.fn);
    }
   const bubblingText=new  bubblingTextInScreen();
</script>

</html>